<template>
	<div id="app">
		<div id="nav">
			<router-link to="/user">个人中心</router-link>
			<router-link to="/login">登陆</router-link>
			<router-link to="/register">注册</router-link>
			<router-link to="/plate">板块页面</router-link>
			<router-link to="/">首页</router-link>
			<router-link to="/page/1">帖子</router-link>
			<router-link to="/newPage">发帖</router-link>
			<router-link to="/admin/page">帖子管理</router-link>
			<router-link to="/admin/plate">板块管理</router-link>
			<router-link to="/admin/pageType">帖子类型管理</router-link>
			<router-link to="/admin/user">用户管理</router-link>
			<router-link to="/admin/notice">通知管理</router-link>
		</div>
		<router-view/>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'
	
	export default {
		methods: {
			...mapActions('user', ['init'])
		},
		created() {
			this.init({
				callback: user => {
					if (!user || !user.username || user === "anonymousUser" || this.$route.path != "/") {
						//TODO 用户未登录
					} else if (user !== "anonymousUser") {
						//TODO 用户登录
					}
				}
			})
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		width: 80%;
		margin: auto;
	}

	#nav {
		padding: 30px;
	}

	#nav a {
		font-weight: bold;
		color: #2c3e50;
	}

	#nav a.router-link-exact-active {
		color: #42b983;
	}
	
	#nav a {
		margin-right: 10px;
	}
</style>
